﻿
<div id="order">
    <div class="ng-scope" id="app">
        <header class="ng-scope">
            <h4 class="title-order">
                <a class="title-top" href="#">我的订单</a>
            </h4>
            <ul class="navlist">
                <li type="lists" class="rightborder active" onClick="getOrderMaster(1)">已支付</li>
                <li type="tof" onClick="getOrderMaster(0)">待支付</li>
            </ul>
        </header>
        <!-- 粗略订单 -->
        <div class="orderlist" id="order_lists" style="background-color: #e0e0e0">
            <ul class="lists ng-scope">
                <div style="height: 15px;"></div>
                <li v-for="(item, i) in list" style="margin: 10px; background-color: white">
                    <div @click="getOrderItems(item.id)">
                    <p>商家名称<span class="status">{{item.orderStatus==1?'已支付':'待支付'}}</span></p>
                    <hr>
                    <p>菜品数量：{{item.number}}</p>
                    <p>下单时间：{{item.orderCreatedTime | formatDate('-')}}</p>
                    </div>
                    <div class="bottom">
                        <p class="money">￥{{item.orderPrice}}</p>
                        <a href="#" v-show="item.orderStatus == 0 || item.orderStatus == -1"  @click="cancle(item.id)">取消</a>
                        <a href="#" v-show="item.orderStatus == 0 || item.orderStatus == -1"  @click="commit(item.id)">提交</a>
                    </div>
                </li>
            </ul>
        </div>
        <!-- 详细订单 -->
        <div class="orderlist" id="order_tof" style="display:none;">
            <ul class="lists ng-scope ">
                <li>
                    <p>商家名称 <span class="status" style="color: red; margin-right: 5px;">{{orderDetial.orderStatus==1?'已支付':'待支付'}}</span></p>
                    <p>取餐号：{{orderDetial.orderGetNo}}</p>
                    <ul class="pdtlist">
                        <li v-for="(o, index) in orderDetial.orderItem">
                            <div class="l">
                                <img :src="o.goodsLogo" class="img-responsive" alt="..." />
                            </div>
                            <div class="r">
                                <p class="t">{{o.goodsName}}</p>
                                <p class="money">单价：￥{{o.price}}</p>
                                <p class="num">数量：{{o.number}}</p>
                            </div>
                        </li>
                    </ul>
                    <div class="bottom">
                        <p class="money">实付：￥{{orderDetial.orderPrice}}元</p>
                    </div>
                    <p>订单编号：{{orderDetial.orderNo}}</p>
                    <p>下单时间：{{orderDetial.orderCreatedTime | formatDate('-')}}</p>
                </li>
            </ul>
            <div style="height: 50px;"></div>
        </div>
    </div>
</div>

<script src="js/vue.js"></script>

    <script>
        var vm = new Vue({
            el: '#app',
            data:{
                list: [],
                orderDetial: {}
            },
            methods:{
                //获取详细订单
                getOrderItems(id){
                    var url="order/dofindOrderMasterByOrderId";
                    let params = {
                        id: id
                    }
                    $.getJSON(url, params, function (result) {
                        console.log(result);
                        vm.orderDetial = result.data;
                        //0.1秒后弹框，等待订单详细信息渲染完
                        setTimeout("open()",100);
                    });

                },
                //订单取消
                cancle(id){
                    var url="order/doCancleOrderMaster";
                    let params = {
                        id: id
                    }
                    $.post(url, params, function (result) {
                        $(".navlist li[type=tof]").trigger("click")
                        alert(result.message);
                    })
                },
                //提交订单
                commit(id){
                    var url="order/doUpdateOrderMasterStatus";
                    let params = {
                        id: id
                    }
                    $.post(url, params, function (result) {
                        $(".navlist li[type=tof]").trigger("click")
                        alert(result.message);
                    })
                }
            },
            filters:{
                formatDate(time, seprator){
                    time=new Date(time)  //看情况加
                    //3.写处理逻辑
                    let y = time.getFullYear()
                    let m = time.getMonth() + 1
                    let d = time.getDate()
                    // 4 这个处理函数比如return 一个数据
                    return y + seprator + m + seprator + d
                }
            }
        })
        $(function () {
            //order：订单tab切换
            $(".navlist li").each(function () {
                $(this).click(function () {
                    $(".navlist li").removeClass("active");
                    $(this).addClass("active");
                });
            });
            getOrderMaster(1);
        })
        //获取订单粗略信息
        function getOrderMaster(orderStatus) {
            var params = {
                orderStatus: orderStatus
            }
            $.getJSON("order/doFindOrderMastersByStatus", params, function (result) {
                vm.list = result.data;
            })
        }
        //弹框方式显示订单详细信息
        function open(){
        	layer.open({
                content: $('#order_tof').html(),   //content可以是字符串，可以是DOM，也可以是一个URL
                title: '订单详情',
                closeBtn: 1,
                yes: function (index, layero) {
                    layer.close(index);
                },
                cancel: function () {
                    //右上角关闭回调

                    //return false 开启该代码可禁止点击该按钮关闭
                }
            })
        }
    </script>

